<template>
  <div class="about">
    <v-header />
    <v-sidebar />
    <div
      class="content-box"
      :class="{
        'content-collapse': collapse && !isPhone,
        full_screen: isFullScreen,
        mobile: isPhone,
      }"
    >
      <v-tags></v-tags>
      <PageAlert ref="pageAlertRef" />
      <div class="content">
        <router-view v-slot="{ Component }">
          <transition name="move" mode="out-in">
            <keep-alive :include="tagsList">
              <component :is="Component" />
            </keep-alive>
          </transition>
        </router-view>
        <!-- <el-backtop target=".content"></el-backtop> -->
      </div>
    </div>
  </div>
</template>
<script>
import { computed, nextTick, ref, provide } from "vue";
import { useStore } from "vuex";
import vHeader from "../../components/layout/Header.vue";
import vSidebar from "../../components/layout/Sidebar.vue";
import vTags from "../../components/layout/Tags.vue";
import PageAlert from "../../components/layout/PageAlert.vue";

export default {
  name: "Main",
  components: {
    vHeader,
    vSidebar,
    vTags,
    PageAlert,
  },
  setup() {
    const store = useStore();
    // 标签栏显示
    const tagsList = computed(() => {
      const list = store.state.tagsList.map((item) => item.name);
      // console.log("tagsList ===> ", tagsList);
      return list;
    });

    // 是否折叠菜单
    const collapse = computed(() => store.state.collapse);
    const isPhone = computed(() => store.state.isPhone);

    // 是否全屏
    const isFullScreen = computed(() => store.state.isFullScreen);

    const pageAlertRef = ref(null);

    const showPageAlert = ({ message, key, type }) => {
      nextTick(() => {
        pageAlertRef.value.show({ message, key, type });
      });
    };

    provide("showPageAlert", showPageAlert);

    return {
      tagsList,
      collapse,
      isPhone,
      isFullScreen,
      pageAlertRef,
    };
  },
};
</script>

<style lang="less" scoped>
.content-box {
  position: absolute;
  left: 250px;
  right: 0;
  top: 56px;
  bottom: 0;
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
  background: #f0f0f0;
  display: flex;
  flex-direction: column;
  &.mobile {
    left: 0;
  }
}

.content-collapse {
  left: 65px;
}
</style>
